<template>
  <div>
    <el-alert title="" type="warning">
      <template slot="title">
        <div class="iconSize">el-button的封装:</div>
        <div class="iconSize">1、能够自动loading</div>
        <div class="iconSize">2、组件上使用了v-bind=$attrs</div>
      </template>
    </el-alert>

    <div style="padding: 20px">
      <srm-button type="primary" :autoLoading="true" @click="handleClick">
        loading按钮
      </srm-button>

      <srm-button
        type="primary"
        :autoConfirm="true"
        @confirm="handleConfirm"
        :confirmConfig="confirmConfig"
      >
        确认弹框按钮
      </srm-button>

      <srmTipButton content="设置" icon="el-icon-s-tools" circle>
      </srmTipButton>
      <srmTipButton
        content="删除"
        type="primary"
        auto-confirm
        @confirm="confirm"
        :tip-config="{ effect: 'light', placement: 'bottom' }"
      >
        删除
      </srmTipButton>


      <el-button type="success" @click="handlesub">
          成功
      </el-button>
    </div>
  </div>
</template>

<script>
import srmButton from "@/components/SrmButton";
import srmTipButton from "@/components/SrmTipButton";
export default {
  data() {
    return {
        inputValue:"bughgyf",
      confirmConfig: {
        message: "此操作将永久删除该数据, 是否继续?",
        title: "温馨提示",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
      },
    };
  },

  components: {
    srmButton,
    srmTipButton,
  },

  methods: {
    handleConfirm() {
      console.log("handleConfirm");
    },

    confirm() {},

    handleClick(fn) {
      setTimeout(() => {
        fn();
      }, 2000);
    },

    handlesub() {
      const h = this.$createElement;

      var _this= this 
      _this.$msgbox({
        title: "消息",
        message: h("p", null, [
          h("span", null, "内容可以是 "),
          h("i", { style: "color: teal" }, "VNode"),
          h("el-input" ),
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 3000);
          } else {
            done();
          }
        },
      }).then((action) => {
        _this.$message({
          type: "info",
          message: "action: " + action,
        });
      }).catch(error=>{
          console.log(error)
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.iconSize {
  font-size: 16px;
  padding: 10px;
  font-weight: bold;
}
</style>